<template>
	<div class="border flex flex-v" :class="[{ 'border-lg': mode == 'lg' }]" :style="{ height: cardHeight }">
		<div class="border-hd-longer" v-if="isLonger">
			<slot name="title">{{ cardTitle }}</slot>
		</div>
		<div class="border-hd" v-else>
			<slot name="title">{{ cardTitle }}</slot>
			<slot name="more" v-if="hasDetails">
				<a href="javascript:;" class="details flex flex-align-center" @click="details">
					<span>详情</span>
					<img src="/img/dashboard/arrow.png" alt="" />
				</a>
			</slot>
		</div>
		<div class="flex-1 border-bd flex flex-v">
			<div class="border-bd-wrap"><slot></slot></div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		mode: {
			type: String,
			default: '' //lg
		},
		cardTitle: {
			type: String,
			default: ''
		},
		cardHeight: {
			type: [String, Number],
			default: '100%'
		},
		isLonger: {
			type: Boolean,
			default: false
		},
		hasDetails: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		details() {
			this.$emit('details');
		}
	}
};
</script>

<style scoped lang="less">
.border {
	width: 5.27rem;
	max-width: 100%;
	height: 2.3rem;
	position: relative;
	.border-hd {
		background: url(/img/dashboard/kuang-shang.png) no-repeat;
		background-size: cover;
		color: #fff;
		font-size: 0.18rem;
		letter-spacing: 0.05rem;
		padding-left: 0.05rem;
		line-height: 0.28rem;
		height: 0.3rem;
		text-align: center;
		position: relative;
		z-index: 10;
	}
	.details {
		position: absolute;
		right: 0.25rem;
		top: 0.15rem;
		color: #fff;
		font-size: 14px;
		letter-spacing: 4px;
		img {
			width: 16px;
		}
	}
	.border-hd-longer {
		background: url(/img/dashboard/bank/kuang-shang2.png) no-repeat;
		background-size: cover;
		color: #fff;
		font-size: 0.18rem;
		letter-spacing: 0.05rem;
		padding-left: 0.05rem;
		line-height: 0.28rem;
		height: 0.3rem;
		text-align: center;
	}
	.border-bd {
		position: relative;
		margin-bottom: 0.1rem;
		&:before {
			content: '';
			display: block;
			background: url(/img/dashboard/kuang-tiao.png) repeat-y;
			background-size: 100% auto;
			flex: 1;
		}
		&:after {
			content: '';
			display: block;
			background: url(/img/dashboard/kuang-xia.png) no-repeat;
			background-size: 100% auto;
			height: 0.45rem;
			width: 100%;
			z-index: 1;
		}
	}
	.border-bd-wrap {
		position: absolute;
		top: 0;
		bottom: 0.1rem;
		left: 0;
		right: 0;
		z-index: 9;
	}
	&.border-lg {
		width: 100%;
		.border-hd {
			background-image: url(/img/dashboard/kuang-shang-big.png);
		}
		.border-bd {
			&:before {
				background-image: url(/img/dashboard/kuang-zhongjian-big.png);
			}
			&:after {
				background-image: url(/img/dashboard/kuang-xia-big.png);
			}
		}
	}
}
</style>
